<template>
	<view>
		<image class="bgimg" src="https://fx.senge.com/uploads/mini/sengeimg/my_bg.png"></image>
		<view class="topinfo ">
			<view class="flex-start">
				<view class="topinfo_images">
					<image class="topinfo_image" :src="topinfo.avatar" mode=""></image>
				</view>
				<view class="name">{{topinfo.nickname}}</view>
				<view class="" style="margin-left: 14rpx;">
					<image v-if="topinfo.level==1" class="vip_img_a" src="https://fx.senge.com/uploads/mini/sengeimg/my_py.png" mode=""></image>
					<image v-if="topinfo.level==2&& topinfo.user_type==0||topinfo.level==2 &&topinfo.user_type==1" class="vip_img_a" src="https://fx.senge.com/uploads/mini/sengeimg/mypttk.png" mode=""></image>
					<image v-if="topinfo.level==2 && topinfo.user_type==2" class="vip_img_a" src="https://fx.senge.com/uploads/mini/sengeimg/myzysqtk.png" mode=""></image>
					<image v-if="topinfo.level==3 && topinfo.level_type==0" class="vip_img_a" src="https://fx.senge.com/uploads/mini/sengeimg/mysqtk.png" mode=""></image>
					<image v-if="topinfo.level==3 && topinfo.level_type==2" class="vip_img_a" src="https://fx.senge.com/uploads/mini/sengeimg/myzjtk.png" mode=""></image>
					<image v-if="topinfo.level==4" class="vip_img_a" src="https://fx.senge.com/uploads/mini/sengeimg/myjxs.png" mode=""></image>
				</view>
			</view>
			<view class="flex-start tagbox">
				<view class="">停留总时长：{{foot_length}}</view>
			</view>
			<view class="flex-start tagbox">
				<view style="width: 140rpx;">客户标签：</view>
				<view  class="flex-start-wrap" v-if="userLevel == 3">
					<view class="tagtag" v-for="(item,index) in tag_info" @click="taginfo(item.id)">{{item.usertag.name}}</view>
					<view class="tag_add" v-if="tag_info==''" @click="$refs.bottom.open()">+ 添加标签</view>
				</view>
				<view  class="flex-start-wrap" v-else >
					<view class="tagtag" v-for="(item,index) in tag_info">{{item.usertag.name}}</view>
					<view class="" v-if="tag_info==''">--</view>
				</view>
			</view>
		<uni-popup ref="center" type="center">
			<view class="cenpopup">
				<view class="taghint">确定删除此标签？</view>
				<view class="flex-s">
					<view class="cli qx" @click="$refs.center.close()">取消</view>
					<view class="cli qd" @click="deltag()">确定</view>
				</view>
			</view>
		</uni-popup> 
		<uni-popup ref="bottom" type="bottom">
			<view class="popup">
				<view class="button"v-for="(item,index) in tagdata" @click="settagid(item.id)">{{item.name}}</view>
				<view class="button cancel" @click="close()">取消</view>
			</view>
		</uni-popup> 

		</view>
		<view class="mescrollBox margin30">
			<view class="flex-center" >
				<view class="ordernavmain1">
					<view class="ordereach" :class="activenav1 == 0 ? 'activenav1':''" @click="navclick1(0)">客户动态</view>
					<view class="ordereach" :class="activenav1 == 1 ? 'activenav1':''" @click="navclick1(1)">客户信息</view>
				</view>
			</view>
			<mescroll-body v-if="activenav1==0" ref="mescrollRef" :up="{
					noMoreSize: 10,
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无数据~',
						fixed: false
					}
				  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view   class="row" v-for="(item,index) in dataList">
					<view class="aodirs flex-start"><view class="big"><text class="min"></text> </view> {{item.create_time}}</view>
					<view class="tihi">
						<view class="hint">{{item.template}}</view>
						<view class="time">停留时间：{{item.length_time}}</view>
						<view v-for="(items,indexs) in item.data.order_info">
							<view class="shop flex-start" v-for="(itemss,indexss) in items.order_goods">
								<image :src="itemss.image" mode=""></image>
								<view class="senge">{{itemss.goods_name}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
			<view v-if="activenav1==1" class="oBottom" >
				<view class="obItem flex-s"><text class="obItem_tit">真实姓名</text><text class="obItem_text">{{datainfoList.real_name||'--'}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">生&emsp;&emsp;日</text><text class="obItem_text">{{datainfoList.birthday||'--'}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">性&emsp;&emsp;别</text><text class="obItem_text">{{datainfoList.sex||'--'}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">联系方式</text><text class="obItem_text">{{datainfoList.mobile||'--'}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">关联日期</text><text class="obItem_text">{{datainfoList.create_time||'--'}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">支付单数</text><text class="obItem_text">{{datainfoList.order_num}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">交易金额</text><text class="obItem_text">{{datainfoList.order_amount}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">售后单数</text><text class="obItem_text">{{datainfoList.sh_order_number}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">售后金额</text><text class="obItem_text">{{datainfoList.sh_order_amount}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">最近交易时间</text><text class="obItem_text">{{datainfoList.order_time || ' --'}}</text> </view>
				<view class="obItem flex-s"><text class="obItem_tit">解除倒计时</text><text class="obItem_text">{{datainfoList.binding_time}}天</text> </view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {khfootprintLog,usertag,delusertag,Addusertag,getKeFirstlist} from '@/api/user'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				dataList: [],
				datainfoList: [],
				topinfo:[],
				tagdata:[],
				tag_info:[],
				id: '',
				tagid: '',
				foot_length: '',
				activenav1: 0,
				userLevel: '',
			}
		},
		onLoad(option) {
			// this.id= option.id
			this.id = this.$Route.query.id;
			this.getusertag()
			this.userLevel =uni.getStorageSync('userInfo').level
		},
		methods: {
			navclick1(type) { //切换状态
				let that = this;
				that.activenav1 = type;
				if(type==0){
					that.downCallback() 
				}else{
					that.KeFirstlist()
				}
				
			},
			async KeFirstlist(){
				const {
					data,
					code
				} = await getKeFirstlist({
					user_id: this.id,
				})
				if (code == 1) {
					this.datainfoList = data
					console.log(this.datainfoList)
					console.log(this.activenav1)
				}
			},
			async deltag(){
				const{
					data,
					code,
				} = await delusertag({
					id:this.tagid,
				})
				if (code == 1) {
					this.adddata = data
					this.downCallback() //之前用的downCallback，不会刷新数据，现在用upCallback，不知是否有问题
					this.upCallback({num:1,size:10})
					this.$refs.center.close()
				} 
			},
			taginfo(id){
				this.$refs.center.open()
				this.tagid = id;
			},
			async settagid(id){//添加标签
				const{
					data,
					code,
				} = await Addusertag({
					user_id:this.topinfo.id,
					tag_id:id
				})
				if (code == 1) {
					this.adddata = data
					this.downCallback() //之前用的downCallback，不会刷新数据，现在用upCallback，不知是否有问题
					this.upCallback({num:1,size:10})
					this.close()
				} 
			},
			close(){  //关闭弹出层
				this.$refs.bottom.close()
			},
			async getusertag(){//获取标签内容
				const{
					data,
					code,
				} = await usertag({})
				if (code == 1) {
					this.tagdata = data
				} 
			},
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				 khfootprintLog({
					type: 0,
					page_size: pageSize,
					page_no: pageNum,
					user_id: this.id,
				}).then(({
					data
				}) => {
					console.log('00') 
					this.topinfo = data.user_info
					this.tag_info = data.tag_info
					this.foot_length = data.foot_length
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		padding-bottom: 30rpx;
	}
	.flex-start-wrap{
		width: 564rpx;
		display: flex;
		/* justify-content: flex-start; */
		flex-wrap: wrap;
		
	}
	.row {
		/* background-color: #fff; */
		/* padding: 26rpx 30rpx; */
		margin:0 30rpx;
		/* border-radius: 12rpx; */
	}

	.topinfo {
		padding: 30rpx;
		position: absolute;
		top: 0rpx;
	}

	.name {
		width: 400rpx;
		font-size: 32rpx;
		margin-left: 30rpx;
		color: #753f32;
	}

	.topinfo_images {
		width: 100rpx;
		height: 100rpx;
	}
	.topinfo_image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.senge {
		color: #717171;
	}

	.shop {
		margin-bottom: 8rpx;
		margin-left: 30rpx;
	}

	.shop image {
		width: 68rpx;
		height: 68rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.popup{
		background-color: #fcfcfc;
	}
	.button{
		padding: 18rpx;
		text-align: center;
		font-size: 30rpx;
		/* border-bottom: #f4f4f4 1rpx solid; */
	}
	.cancel{
		color:#81383c;
		border-top: #f4f4f4 8rpx solid;
		padding-bottom: 40rpx;
	}
	.cenpopup{
		width: 380rpx;
		background-color: #fcfcfc;
		border-radius: 14rpx;
	}
	.taghint{
		text-align: center;
		padding: 42rpx;
	}
	.cli{
		width: 50%;
		text-align: center;
		padding: 16rpx 0;
	}
	.qx{
		background-color: #dadada;
		border-radius: 0 0 0 14rpx;
	}
	.qd{
		background-color: #cb1616;
		color: #fff;
		border-radius: 0 0 14rpx 0 ;
	}
	.tagbox{
		align-items: flex-start;
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #764133;
	}
	.tagtag{
		font-size: 24rpx;
		padding: 0 10rpx; 
		background-color: #fee0bd;
		margin-right: 8rpx;
		margin-bottom: 6rpx;
		height: 34rpx;
		line-height: 36rpx;
	}
	.tag_add{
		font-size: 24rpx;
		border: 1rpx solid #b17969;
		padding: 0rpx 10rpx; 
		height: 36rpx;
		line-height: 36rpx;
	}
	.ordernavmain1 {
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 12rpx 12rpx 0 0 ;
		padding: 26rpx;
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}
	.ordereach {
			position: relative;
			color: #0A0A0A;
			font-size: 28rpx;
			width: 200rpx;
			padding: 4rpx 0;
			text-align: center;
			border-radius: 40rpx;
		}
	.activenav1::after {
		font-size: 34rpx;
		position: absolute;
		left: 50%;
		top: 50rpx;
		content: "";
		display: block;
		width: 60rpx;
		margin-left: -30rpx;
		height: 4rpx;
		background-color: #f3430e;
		border-radius: 2rpx;
	}
	.activenav1 {
		font-size: 30rpx;
		color: #ee434b;
	}
	.oBottom{
		padding: 20rpx 38rpx;
		margin-top: -60rpx;
	}
	.obItem{
		display:flex;
		font-size: 30rpx;
		color: #999999;
		line-height: 115rpx;
		border-bottom: #f4f4f4 solid 1rpx;
	}
	.obItem_tit{
		color: #000;
	}
	.obItem .flex{
		flex: 1;
	}
	.big{
		margin-right: 20rpx;
		width: 30rpx;
		height: 30rpx;
		background-color: #f7dfbf;
		border-radius: 50%;
		padding: 8rpx;
		/* background-color: #292f39; */
	}
	.min{
		display: block;
		width: 14rpx;
		height: 14rpx;
		background-color: #f38670;
		border-radius: 50%;
	}
	.tihi{
		border-left: 4rpx solid #f4e2c7;
		margin-left: 14rpx;
		padding-top: 12rpx;
	}
	
	.time {
		margin-left: 36rpx; 
		padding: 8rpx 12rpx;
	}
	.hint{
		margin-left: 36rpx; 
		padding: 12rpx;
		/* color: #f56700; */
	}
	.aodirs{
		color: #9e9fa1;
	}
	.vip_img_a{
		width: 160rpx ;
		height: 44rpx ;
	}
	.bgimg{
		width: 100%;
		height: 330rpx;
	}
	.mescrollBox{
		background-color: #ffffff;
		padding-top: 36rpx;
		margin-top: -12rpx;
		position: absolute;
		top: 280rpx;
		border-radius: 12rpx;
	}
</style>
